<template>
  <view class="warehouse">
    <view class="u-skeleton">
      <view class="classifyfixd">
        <view class="bigTab">
          <view class="smlnavTab">
            <view class="smlactive"> 分享 </view>
          </view>
          <view class="showimg" @click="navigateTo('/pages/customer-service/index')">
            <image src="/src/static/images/kefu1.png" />
          </view>
        </view>
        <view class="navTab">
          <view
            :class="[activeTab === 'redeemed' && 'active']"
            key="redeemed"
            @click="switchRedeemed"
          >
            进行中
          </view>
          <view
            :class="[activeTab === 'pickedUp' && 'active']"
            key="pickedUp"
            @click="switchPickedUp"
          >
            已过期
          </view>
        </view>
      </view>

      <view>
        <view class="noshop" v-if="redeemedPayload.party == 0">
          <view>
            <view class="sas_one">
              <image src="/src/static/images/sky.png" style="height: 146px" />
              <view class="sas_two">仓库空空如也~</view>
            </view>
          </view>
          <view class="gokh" @click="switchTab('/')">去开盒</view>
        </view>

        <view class="conent" v-else>
          <view class="shopevery clearfix" v-if="activeTab === 'redeemed'">
            <view
              class="u-transition u-fade-enter-to u-fade-enter-active"
              style="transition-duration: 1000ms; transition-timing-function: ease-out"
            />

            <view class="shop-right">
              <view class="shop-title"> 邀请码:{{ redeemedPayload.share }}</view>

              <view class="shop-price">
                <text>已获取:{{ getGold(redeemedPayload.gold) }} </text>
              </view>

              <view class="shop-price">
                <div style="display: flex; font-size: 12px; align-items: center"
                  >倒计时: &nbsp;
                  <u-count-down
                    :time="calculateCountdownTime(redeemedPayload.time)"
                    format="HH:mm:ss"
                  />&nbsp;过期
                </div>
              </view>

              <view class="exchange">
                <view class="statusbtn nowancheng" @click="navigateTo('/pages/submit-order/index')"
                  >去分享</view
                >
              </view>
            </view>
          </view>

          <template v-if="activeTab === 'pickedUp'">
            <view
              class="shopevery clearfix"
              v-for="(item, index) in pickedUpPayload"
              :key="index"
              style="align-items: center"
            >
              <view
                class="u-transition u-fade-enter-to u-fade-enter-active"
                style="transition-duration: 1000ms; transition-timing-function: ease-out"
              />

              <view class="shop-right" style="justify-content: space-evenly">
                <view class="shop-title"> 邀请码:{{ item.code }}</view>

                <view class="shop-price">
                  <text>已获取:{{ getGold(item.point) }} </text>
                </view>
              </view>

              <u-tag text="已过期" plain size="mini" type="error" />
            </view>
          </template>
        </view>
      </view>
    </view>

    <u-popup :show="exchangeShow" mode="center">
      <view class="numbergoods_con">
        <view>可兑换幸运币</view>
        <view>99</view>
        <view class="clearfix">
          <view @click="exchangeShow = false">取消</view>
          <view>确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
  import { onShow } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import { checkRedeemedShareCodeApi, checkPickedUpShareCodeApi } from '@/api/index';

  const userStore = useUserStore();
  const redeemedPayload = ref<any>({});
  const pickedUpPayload = ref<any>({});
  const exchangeShow = ref(false);
  const activeTab = ref('redeemed');
  function navigateTo(url) {
    uni.navigateTo({
      url,
    });
  }

  function getGold(num) {
    const shuijing = Math.floor(num / 10000);

    const shuijingsuipian = Math.floor((num % 10000) / 100);

    const jinbi = num % 100;

    return `${shuijing ? shuijing + '水晶 ' : ''}${
      shuijingsuipian ? shuijingsuipian + '水晶碎片 ' : ''
    }${jinbi + '金币'}`;
  }
  function calculateCountdownTime(time) {
    const targetTime = new Date(time).getTime();
    const currentTime = Date.now();

    return targetTime - currentTime;
  }
  function switchRedeemed() {
    activeTab.value = 'redeemed';
    getRedeemed();
  }

  function switchPickedUp() {
    activeTab.value = 'pickedUp';
    getPickedUp();
  }

  function switchTab(url) {
    uni.switchTab({ url });
  }

  function getRedeemed() {
    checkRedeemedShareCodeApi().then((res) => {
      redeemedPayload.value = res.data;
    });
  }

  function getPickedUp() {
    checkPickedUpShareCodeApi().then((res) => {
      pickedUpPayload.value = res;
    });
  }
  onShow(() => {
    if (!userStore.getToken) {
      uni.navigateTo({
        url: '/pages/login/index',
      });
    } else {
      getRedeemed();
    }
  });
</script>

<style lang="less">
  .warehouse {
    .classifyfixd {
      position: fixed;
      top: 0;
      width: 100%;
      background: #fff;
      z-index: 99;

      .bigTab {
        position: relative;
        height: 40px;
        line-height: 40px;

        .smlnavTab {
          display: flex;
          justify-content: center;

          uni-view {
            position: relative;
            margin-left: 43px;
            color: #b2afbb;
            font-weight: 800;

            &:first-of-type {
              margin-left: 0;
            }
          }

          .smlactive {
            color: #323232;
            font-size: 18px;

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 23px;
              height: 3px;
              background-color: #fe5741;
              left: 50%;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
            }
          }
        }

        .showimg {
          position: absolute;
          right: 4%;
          top: 0;

          uni-image {
            width: 25px;
            height: 25px;
          }
        }
      }

      .navTab {
        display: flex;
        height: 40px;
        line-height: 40px;

        uni-view {
          position: relative;
          text-align: center;
          font-size: 14px;
          width: 58px;
          height: 25px;
          line-height: 25px;
          margin: 7px 0 0 15px;
          color: #b1afbb;
          border: 1px solid #fff;
        }

        .active {
          border: 1px solid #ff5e30;
          color: #ff5e30;
        }
      }
    }

    .conent {
      padding: 90px 0 60px;

      .shopevery {
        background: #fff;
        border-radius: 3px;
        margin: 10px 4% 0;
        padding: 10px;
        display: flex;

        .shop-right {
          float: left;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: calc(100% - 130px);
          height: 120px;
          margin-left: 10px;

          .shop-title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-weight: 800;
          }

          .nowancheng {
            background: linear-gradient(0deg, #ff5525, #ff8361);
            color: #fff;
          }

          .shop-price {
            color: #ff392c;
            font-weight: 800;

            uni-image {
              width: 25px;
              height: 26px;
              margin: -1px 5px 0 0;
            }

            uni-text {
              font-size: 12px;
              color: #ff392c;
            }
          }

          .wancheng {
            background: #f8f8f8;
            color: #b1afbb;
          }

          .exchange {
            display: flex;
            justify-content: space-between;

            .luckycoin {
              border: 1px solid #ff392c;
              color: #ff392c;
            }

            .nowancheng {
              background: linear-gradient(0deg, #ff5525, #ff8361);
              color: #fff;
            }

            > uni-view {
              width: 93px;
              box-sizing: border-box;
            }
          }

          .statusbtn {
            height: 35px;
            border-radius: 3px;
            font-size: 14px;
            text-align: center;
            line-height: 35px;
          }
        }

        > uni-image {
          float: left;
          width: 120px;
          height: 120px;
          border-radius: 3px;
        }
      }
    }

    .noshop {
      .gokh {
        width: 133px;
        height: 40px;
        background: linear-gradient(270deg, #ff8361, #ff5525);
        border-radius: 40px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        margin: 24px auto 0;
      }

      .sas_one {
        text-align: center;
        padding-top: 170px;

        > uni-image {
          width: 60%;
        }

        .sas_two {
          margin-top: 14px;
          text-align: center;
          color: #b1afbb;
        }
      }
    }

    .numbergoods_con {
      width: 200px;
      background: #fff;
      border-radius: 10px;

      uni-view {
        text-align: center;
      }

      > uni-view:nth-of-type(1) {
        font-size: 12px;
        padding: 25px 0 5px;
      }

      > uni-view:nth-of-type(2) {
        font-size: 20px;
        font-weight: 800;
      }

      > uni-view:nth-of-type(3) {
        border-top: 1px solid #eee;
        margin-top: 25px;

        uni-view {
          float: left;
          width: 50%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          box-sizing: border-box;

          &:first-of-type {
            border-right: 1px solid #eee;
            color: #999;
          }
        }
      }
    }
  }

  .u-image {
    position: relative;
    transition: opacity 0.5s ease-in-out;
  }

  @media screen and (min-width: 1000px) and (max-width: 2520px) {
    .warehouse .classifyfixd {
      max-width: 390px;
      margin: 0 auto /* 居中对齐 */;
    }
  }

  :deep(.u-count-down) {
    .u-count-down__text {
      color: #ff392c !important;
    }
  }
</style>
